<template>
  <div class="add-category-container">
    <h2>添加课程类别</h2>
    <el-form 
      ref="categoryFormRef" 
      :model="categoryForm" 
      :rules="rules" 
      label-width="100px"
      class="category-form"
    >
      <el-form-item label="类别名称" prop="name">
        <el-input v-model="categoryForm.name" placeholder="请输入课程类别名称" maxlength="20" show-word-limit></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import { api } from '../api'
import { ElMessage } from 'element-plus'

export default {
  name: 'AddCategory',
  setup() {
    const router = useRouter()
    const userStore = useUserStore()
    const categoryForm = reactive({
      name: ''
    })
    
    const rules = {
      name: [
        { required: true, message: '请输入类别名称', trigger: 'blur' },
        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
      ]
    }
    
    const categoryFormRef = ref(null)
    
    // 提交表单 - 按照AddCourse.vue的模式重写
    const submitForm = async () => {
      try {
        // 检查用户是否已登录
        if (!userStore.isAuthenticated) {
          ElMessage.error('请先登录后再添加类别');
          return;
        }
        
        await categoryFormRef.value.validate();
        
        // 准备提交的数据 - 确保字段与后端表结构匹配
        // 根据demo.js，categories表需要: title, categoryType
        const submitData = {
          title: categoryForm.name,
          categoryType: '课程' // 固定为'课程'
        };
        
        console.log('准备提交的类别数据:', submitData);
        console.log('表索引: 5 (categories表)');
        
        // 使用与AddCourse.vue相同的API调用方式
        const response = await api.items.add(submitData, 5);
        
        console.log('提交响应:', response);
        
        if (response && response.success !== false) {
          ElMessage.success('课程类别添加成功！');
          resetForm();
        } else {
          ElMessage.error(response?.message || '课程类别添加失败，请重试！');
        }
      } catch (error) {
        console.error('提交表单时出错:', error);
        // 使用与AddCourse.vue相同的错误处理逻辑
        if (error.response) {
          ElMessage.error(`提交失败: ${error.response.data?.message || error.response.statusText}`);
        } else if (error.message) {
          ElMessage.error(`提交失败: ${error.message}`);
        } else {
          ElMessage.error('提交失败，请检查网络连接！');
        }
      }
    }
    
    // 重置表单
    const resetForm = () => {
      const form = categoryFormRef.value
      if (form) {
        form.resetFields()
      }
    }
    
    return {
      categoryForm,
      rules,
      categoryFormRef,
      submitForm,
      resetForm
    }
  }
}
</script>

<style scoped>
.add-category-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-top: 2rem;
}

.add-category-container h2 {
  font-size: 1.8rem;
  color: #333;
  margin-bottom: 1.5rem;
  text-align: center;
  padding-bottom: 1rem;
  border-bottom: 2px solid #42b983;
}

.category-form {
  margin-top: 1rem;
}

.el-form-item {
  margin-bottom: 1.5rem;
}

.el-form-item__content {
    line-height: 1.5;
  }
  
  /* 确保输入框内文字可见 */
  :deep(.el-input__inner) {
    line-height: 1.8 !important;
    color: #303133 !important;
    background-color: #ffffff !important;
    border-color: #dcdfe6 !important;
    padding: 12px !important;
    font-size: 14px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    opacity: 1 !important;
    caret-color: #409eff !important; /* 确保光标可见 */
  }
  
  /* 增强输入框焦点状态的可见性 */
  :deep(.el-input__inner:focus) {
    color: #1f2329 !important;
    border-color: #409eff !important;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2) !important;
    background-color: #ffffff !important;
    caret-color: #409eff !important; /* 确保光标可见 */
  }
  
  /* 确保输入框在输入时文字可见 */
  :deep(.el-input.is-focus .el-input__inner) {
    color: #1f2329 !important;
    background-color: #ffffff !important;
    caret-color: #409eff !important;
  }
  
  /* 确保placeholder文字可见 */
  .el-input__inner::placeholder {
    color: #909399 !important;
    opacity: 1;
  }
  
  /* 确保按钮样式正确 */
  .el-button {
    min-width: 80px;
    padding: 10px 20px;
  }
  
  .el-button + .el-button {
    margin-left: 10px;
  }
  
  /* 响应式设计 */
  @media (max-width: 768px) {
    .add-category-container {
      padding: 1.5rem;
      margin: 1rem;
    }
    
    .add-category-container h2 {
      font-size: 1.5rem;
    }
    
    .el-form-item {
      margin-bottom: 1rem;
    }
    
    .el-form-item__content {
      line-height: 1.5;
    }
    
    .el-button {
      min-width: 60px;
      padding: 8px 16px;
      font-size: 12px;
    }
    
    .el-button + .el-button {
      margin-left: 5px;
    }
  }
</style>